<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0}
        ul{
            list-style: none
        }
        .box{
            width: 600px;
            margin:50px auto;
            border:1px solid #000;
            padding: 20px 0;
            background: #ddd;
        }
        
        textarea{
            width: 430px;
            resize:none;
        }
        li{
            width: 430px;
            border-bottom: 1px dashed #000;
            line-height: 30px;
            margin-left: 80px;
        }
        li a{
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        微博发布：<textarea name="" id="" cols="60" rows="15"></textarea> <button>发布</button>
        <!-- <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul> -->

    </div>
    <script>
        var div = document.getElementsByTagName("div")[0];
        var textarea = document.getElementsByTagName("textarea")[0];
        var btn = document.getElementsByTagName("button")[0];
        var ul = document.createElement("ul");
        btn.onclick = function(){
            if(textarea.value == ""){
                alert("输入不能为空");
            }else{
                div.appendChild(ul);
                var li = document.createElement("li");
                li.innerHTML = textarea.value+'<a href="#" onclick="del(this)">删除</a>';
                var lis = document.getElementsByTagName("li");
                if(lis.length == 0){
                    ul.appendChild(li)
                }else{
                    ul.insertBefore(li,lis[0]);
                }
                textarea.value = ""
            } 
        }
        function del(a){
            ul.removeChild(a.parentNode)
        }

    </script>
</body>
</html>